import React, { Component } from 'react';
import { Grid, Select, Search, Input, CascaderSelect , DatePicker } from '@alifd/next';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api.js';

const { Row, Col } = Grid;
const { MonthPicker } = DatePicker;
export default class chooseHead extends Component {
  static displayName = '库存查询筛选';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      filterData: {},
      GoodsTypeList: [], // 商品类别
      storeList: props.storeList,
    };
  }
  // 获取商品类别列表
  getGoodsTypeList= () => {
    service({
      method: 'get',
      url: api.GoodsTypeList,
    })
      .then((res) => {
        // console.log(res);
        const data = res.data.class_list;
        data.forEach((item) => {
          if (item.children) {
            item.children.sort((item1, item2) => {
              return item1.label.localeCompare(item2.label, 'cn');
            });
          }
        });
        this.setState(
          {
            GoodsTypeList: data,
          }
        );
      });
  }
  componentWillReceiveProps(nextProps) {
    this.setState(
      {
        storeList: nextProps.storeList,
      }
    );
  }
  componentDidMount() {
    this.getGoodsTypeList();
  }
  handleFormChange = (value) => {
    this.setState(
      {
        filterData: value,
      }, () => {
        const data = { ...this.state.filterData };
        if (data.PanTime) {
          data.year = new Date(data.PanTime).getFullYear();
          data.month = new Date(data.PanTime).getMonth() + 1;
        }
        delete data.PanTime;
        // console.log(data);
        this.props.filterChange(data);
      }
    );
  };

  render() {
    const { GoodsTypeList, storeList } = this.state;
    return (
      <div style={styles.overview}>
        <PageHead title="库存盘点筛选" />
        <IceContainer style={styles.alignRight}>
          <IceFormBinderWrapper value={this.state.filterData} onChange={this.handleFormChange}>
            <Row gutter="5" wrap>
              <Col span="6">
                <span className="SelectLabel">分店仓库</span>
                <IceFormBinder name="w_id">
                  <Select size="large" className="Select" dataSource={storeList} placeholder="请选择分店仓库" hasClear />
                </IceFormBinder>
              </Col>
              <Col span="6" >
                <span className="SelectLabel">商品类别</span>
                <IceFormBinder name="class_id">
                  <CascaderSelect dataSource={GoodsTypeList} size="large" expandTriggerType="hover" placeholder="请选择商品类别" className="Select" hasClear listStyle={{ width: '180px' }} />
                </IceFormBinder>
              </Col>
              <Col span="6">
                <span className="SelectLabel">型号</span>
                <IceFormBinder name="model">
                  <Input size="large" className="Select" placeholder="输入商品型号" />
                </IceFormBinder>
              </Col>
              <Col span="6">
                <span className="SelectLabel">生产批号</span>
                <IceFormBinder name="batch_number">
                  <Input size="large" className="Select" placeholder="输入生产批号" />
                </IceFormBinder>
              </Col>
              <Col span="6">
                <span className="SelectLabel">盘点时间</span>
                <IceFormBinder name="PanTime">
                  <MonthPicker size="large" className="Select" placeholder="选择盘点时间" />
                </IceFormBinder>
              </Col>
              <Col span="6">
                <span className="SelectLabel">商品搜索</span>
                <IceFormBinder name="search">
                  <Search
                    type="normal"
                    placeholder="请输入商品名称或者商品条码"
                    size="medium"
                    className="Select"
                  />
                </IceFormBinder>
              </Col>
            </Row>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  row: {
    marginBottom: '20px',
  },
  input: {
    float: 'left',
  },
};
